Add ShapePrimitive support for arcs and ellipses by VANSH3104 · Pull Request #8617 · processing/p5.js

VANSH3104 · 2026-03-06T05:23:05Z

Resolves #8277

Changes:

Add ArcPrimitive and EllipsePrimitive classes extending ShapePrimitive
Implement visitor methods in PrimitiveToPath2DVisitor for 2D rendering
Add vertex tessellation for WebGL in PrimitiveToVerticesVisitor
Update arc() and ellipse() to use new ShapePrimitive system

PR Checklist

[ x] npm run lint passes
[ x] Inline reference is included / updated
Unit tests are included / updated

VANSH3104 · 2026-03-06T05:24:36Z

@ksen0, @davepagurek could you please review this and suggest any changes?

davepagurek

Thanks for taking this on! I left a few comments about how to make these primitives work more like the others. We should also add some unit visual in both 2D and WebGL mode of these methods if we don't already have some to make sure things keep working.

davepagurek · 2026-03-14T20:37:51Z

src/core/p5.Renderer2D.js

+
+    const primitive = new EllipsePrimitive(x, y, w, h);
+    const shape = { accept(visitor) { primitive.accept(visitor); } };
+    this.drawShape(shape);


It looks like drawShape already handles clipping so we can remove the clipping code above:

p5.js/src/core/p5.Renderer2D.js

Lines 269 to 279 in 01aa360

drawShape(shape) {

const visitor = new PrimitiveToPath2DConverter({

strokeWeight: this.states.strokeWeight

});

shape.accept(visitor);

if (this._clipping) {

const currentTransform = this.drawingContext.getTransform();

const clipBaseTransform = this._clipBaseTransform.inverse();

const relativeTransform = clipBaseTransform.multiply(currentTransform);

this.clipPath.addPath(visitor.path, relativeTransform);

this.clipPath.closePath();

davepagurek · 2026-03-14T20:40:12Z

src/core/p5.Renderer2D.js

-    }
+
+    const primitive = new EllipsePrimitive(x, y, w, h);
+    const shape = { accept(visitor) { primitive.accept(visitor); } };


Rather than making an object that isn't a full p5.Shape, could we instead make a new real p5.Shape and create a method on it that adds an ellipse primitive? similar to the relation between these methods and their corresponding primitives:

p5.js/src/shape/custom_shapes.js

Lines 891 to 906 in 618e4c8

vertex(position, textureCoordinates, { isClosing = false } = {}) {

const added = this.#generalVertex('vertex', position, textureCoordinates);

added.isClosing = isClosing;

}

bezierVertex(position, textureCoordinates) {

this.#generalVertex('bezierVertex', position, textureCoordinates);

}

splineVertex(position, textureCoordinates) {

this.#generalVertex('splineVertex', position, textureCoordinates);

}

arcVertex(position, textureCoordinates) {

this.#generalVertex('arcVertex', position, textureCoordinates);

}

davepagurek · 2026-03-14T20:41:40Z

src/shape/custom_shapes.js

+    const centerY = arc.y + arc.h / 2;
+    const radiusX = arc.w / 2;
+    const radiusY = arc.h / 2;
+    const numPoints = Math.max(3, this.curveDetail);


curveDetail is a multiplier on the length, so numPoints should be something like ceil(this.curveDetail * arcLength)

davepagurek · 2026-03-14T20:45:52Z

src/shape/custom_shapes.js

+  #stop;
+  #mode;
+  // vertexCapacity 0 means this primitive should not accumulate normal path vertices
+  #vertexCapacity = 0;


Rather than a capacity of zero, possibly we can contain a vertex representing the start and the end so that we can include all the other properties on a general vertex, which might include texture coordinates, fill, and stroke colors in webgl? Ideally it should go through #generalVertex in Shape to get all of that functionality.

davepagurek · 2026-03-14T20:47:42Z

src/shape/custom_shapes.js

+
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = arc.start + (arc.stop - arc.start) * (i / numPoints);
+      verts.push(new Vertex({


Similar to what I mentioned above in ArcPrimitive, ideally we should have some vertices in the primitive already so we can copy their data all around the ellipse but update the position part (the first 2 elements) for arcs and ellipses. For arcs, ideally we would also interpolate the properties of the vertex from the start to the end.

Can you explain it more please?

For our current vertices in beginShape/endShape, they have methods on the Shape class to add them that go through #generalVertex:

p5.js/src/shape/custom_shapes.js

Lines 891 to 913 in 209f8d1

vertex(position, textureCoordinates, { isClosing = false } = {}) {

const added = this.#generalVertex('vertex', position, textureCoordinates);

added.isClosing = isClosing;

}

bezierVertex(position, textureCoordinates) {

this.#generalVertex('bezierVertex', position, textureCoordinates);

}

splineVertex(position, textureCoordinates) {

this.#generalVertex('splineVertex', position, textureCoordinates);

}

arcVertex(position, textureCoordinates) {

this.#generalVertex('arcVertex', position, textureCoordinates);

}

beginContour(shapeKind = constants.PATH) {

if (this.at(-1)?.kind === constants.EMPTY_PATH) {

this.contours.pop();

}

this.contours.push(new Contour(shapeKind));

}

That's generally to support a construct in beginShape/endShape where you can call something in the form of somethingVertex(x, y, [z], [u], [v]), letting you specify texture coordinates between points, and call fill() or stroke() between vertices too. There's a proposal #6459 on what arcs would look like in a per-vertex form like that, and arcTo in the canvas 2D API works like that too.

We don't need to actually implement arcVertex yet, but ideally we'd start to set ourselves up to be able to do that eventually. That likely means having an arc segment with #vertexCapacity of 2, so you can put a vertex at the start and a vertex at the end, referring to these:

Arguably the arcTo primitive could be separate from the arc primitive, but since a lot will be shared, I think the idea would be ideally to build it in a way where arc is made out of arcTo-style primitives. But there's a case to be made that we only get that benefit once we have arcTo, and having any support for arc unblocks other features like SVG export. What do you think?

…e() pattern

VANSH3104 · 2026-03-18T17:53:22Z

@davepagurek thanks for the thorough review! I've made updates based on your recommendations.Could you please review and let me know if the changes correctly incorporate your feedback? Thanks!

Add ShapePrimitive support for arcs and ellipses

01aa360

davepagurek reviewed Mar 14, 2026

View reviewed changes

Fix: Initialize shape with vertex properties in arc() to match ellips…

bea47ea

…e() pattern

Merge branch 'dev-2.0' into primitiveshapes

e8cd4fd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add ShapePrimitive support for arcs and ellipses#8617

Add ShapePrimitive support for arcs and ellipses#8617
VANSH3104 wants to merge 3 commits intoprocessing:dev-2.0from
VANSH3104:primitiveshapes

VANSH3104 commented Mar 6, 2026 •

edited

Loading

Uh oh!

VANSH3104 commented Mar 6, 2026 •

edited

Loading

Uh oh!

davepagurek left a comment

Uh oh!

davepagurek Mar 14, 2026

Uh oh!

davepagurek Mar 14, 2026

Uh oh!

davepagurek Mar 14, 2026

Uh oh!

davepagurek Mar 14, 2026

Uh oh!

davepagurek Mar 14, 2026

Uh oh!

VANSH3104 Mar 23, 2026

Uh oh!

davepagurek Mar 24, 2026

Uh oh!

davepagurek Mar 24, 2026

Uh oh!

VANSH3104 commented Mar 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	drawShape(shape) {
	const visitor = new PrimitiveToPath2DConverter({
	strokeWeight: this.states.strokeWeight
	});
	shape.accept(visitor);
	if (this._clipping) {
	const currentTransform = this.drawingContext.getTransform();
	const clipBaseTransform = this._clipBaseTransform.inverse();
	const relativeTransform = clipBaseTransform.multiply(currentTransform);
	this.clipPath.addPath(visitor.path, relativeTransform);
	this.clipPath.closePath();

	vertex(position, textureCoordinates, { isClosing = false } = {}) {
	const added = this.#generalVertex('vertex', position, textureCoordinates);
	added.isClosing = isClosing;
	}

	bezierVertex(position, textureCoordinates) {
	this.#generalVertex('bezierVertex', position, textureCoordinates);
	}

	splineVertex(position, textureCoordinates) {
	this.#generalVertex('splineVertex', position, textureCoordinates);
	}

	arcVertex(position, textureCoordinates) {
	this.#generalVertex('arcVertex', position, textureCoordinates);
	}

Uh oh!

Conversation

VANSH3104 commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Uh oh!

VANSH3104 commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davepagurek left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VANSH3104 commented Mar 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

VANSH3104 commented Mar 6, 2026 •

edited

Loading

VANSH3104 commented Mar 6, 2026 •

edited

Loading